<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue router</title>
</head>
<body>
<div id="app">
    <vue-one></vue-one>
    <router-link to="/">首页</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/product">Product</router-link>
    <router-view></router-view>
    <vue-three></vue-three>
</div>
<script src="vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);

    Vue.component('vue-one', {
        template: '<h2>This is one</h2>'
    });

    Vue.component('vue-two', {
        template: '<h2>This is two</h2>'
    });
    Vue.component('vue-three', {
        template: '<h2>This is three</h2>'
    });

    let routerIndex = {
        template: '<h2>This is Index</h2>'
    };
    let routerNews = {
        template: '<h2>This is News</h2>'
    };
    let routerProduct = {
        template: '<h2>This is Product</h2>'
    }

    // 创建 vueRouter 对象
    let router = new VueRouter({
        routes: [
            {path: '/', component: routerIndex},
            {path: '/news', component: routerNews},
            {path: '/product', component: routerProduct},
        ]
    });

    let vm = new Vue({
        el: "#app",
        router, // 声明当前 vm 对象使用的路由表
        data: {}
    })
</script>
</body>
</html>